<template>
  <div>
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(item,index) in trendingInfo.banner" :key="index">
        <image mode="widthFix" :src="item.image" />
      </swiper-item>
    </swiper>
    <h1 v-if="trendingInfo.brandList.length">热销品牌</h1>
    <div class="category-list">
      <div class="goods" @click="toBrandList(item)" v-for="(item,index) in trendingInfo.brandList" :key="index">
        <image class="thumb" mode="heightFix" :lazy-load="true" :src="item.logoUrl" />
      </div>
    </div>
    <h1>热销商品</h1>
    <div class="goods-list">
      <div class="goods" v-for="(item,index) in trendingInfo.list" :key="index">
        <u-image :lazy-load="true" mode="widthFix" class="thumb" :src="item.product.logoUrl"></u-image>
        <div class="goods-name">{{item.product.title}}</div>
        <div class="price-box">
          <div class="price">&yen;{{item.product.price | formatPrice}}</div>
          <div class="sold-num">{{item.product.soldNum}}人付款</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sign from '@/utils/sign';
import { dewuHeader } from '@/utils/dewu';
import uImage from 'uview-ui/components/u-image/u-image'
export default {
  name: 'Home',
  components: { uImage },
  data() {
    return {
      trendingInfo: { banner: [] }
    };
  },
  created() {
    const signId = sign({
      tabId: 4,
      limit: 50,
      lastId: '',
    })
    uni.showLoading();
    uni.request({
      url: 'https://app.dewu.com/api/v1/h5/index/fire/shopping-tab',
      method: 'POST',
      data: {
        sign: signId,
        tabId: 4,
        limit: 50,
        lastId: '',
      },
      header: dewuHeader,
      success: (res) => {
        res = res.data.data;
        console.log(res);
        this.trendingInfo = res;
        uni.hideLoading();
      }
    })
  },
  mounted() {

  },
  methods: {
    toBrandList(item) {
      wx.setClipboardData({
        data: item.routerUrl
      });
      setTimeout(() => {
        wx.showToast({ icon: 'none', title: '请在系统浏览器打开复制的链接', duration: 1000 })
      }, 300);
      /* uni.navigateTo({
        url: '/pages/webview/index?url=' + encodeURI(item.routerUrl)
      }) */
    }
  },
  filters: {
    formatPrice(value) {
      return Math.round(value / 100)
    }
  },
};
</script>

<style scoped lang="scss">
.swiper {
  image {
    width: 100%;
    // height: 120rpx;
  }
}
h1 {
  margin-left: 32rpx;
  font-size: 36rpx;
}
.category-list {
  padding: 32rpx;
  margin-top: 24rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 36rpx;
  column-gap: 24rpx;
  justify-items: center;
  .goods {
    .thumb {
      height: 180rpx;
    }
  }
}
.goods-list {
  padding: 32rpx;
  margin-top: 24rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 36rpx;
  column-gap: 24rpx;
  .goods {
    // background-color: #333;
    border-radius: 24rpx;
    min-height: 360rpx;
    .thumb {
      height: 280rpx;
      min-height: 280rpx;
      width: 100%;
    }
    &-name {
      margin-top: 24rpx;
      color: #666;
      font-size: 28rpx;
      text-align: left;
    }
    .price-box {
      color: #000000;
      margin-top: 16rpx;
      display: flex;
      justify-content: space-between;
      .price {
        font-size: 28rpx;
      }
      .sold-num {
        font-size: 26rpx;
        color: #888;
      }
    }
  }
}
</style>
